<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrowhead at a point with a given angle
    function drawArrowhead(ctx, x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2.5);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2.5);
        ctx.stroke();
        ctx.restore();
    }

    // --- Main Drawing ---

    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px serif';

    // Coordinates and parameters
    const wireX = 150;
    const wireY = 200;
    const wireRadius = 15;
    const pX = 350;
    const pY = 200;
    const pRadius = 4;
    const straightArrowLen = 100;
    const arrowheadSize = 12;

    // 1. Draw the wire
    ctx.beginPath();
    ctx.arc(wireX, wireY, wireRadius, 0, 2 * Math.PI);
    ctx.stroke();
    // Draw the 'X' inside the wire
    const crossSize = wireRadius * 0.6;
    ctx.beginPath();
    ctx.moveTo(wireX - crossSize, wireY - crossSize);
    ctx.lineTo(wireX + crossSize, wireY + crossSize);
    ctx.moveTo(wireX + crossSize, wireY - crossSize);
    ctx.lineTo(wireX - crossSize, wireY + crossSize);
    ctx.stroke();

    // 2. Draw the "wire" label and dashed arrow
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('wire', wireX - 50, wireY - 30);
    ctx.save();
    ctx.setLineDash([4, 4]);
    ctx.beginPath();
    const fromX_dash = wireX - 30;
    const fromY_dash = wireY - 20;
    const toX_dash = wireX - wireRadius * Math.cos(Math.PI / 8) - 2;
    const toY_dash = wireY - wireRadius * Math.sin(Math.PI / 8) - 2;
    ctx.moveTo(fromX_dash, fromY_dash);
    ctx.lineTo(toX_dash, toY_dash);
    ctx.stroke();
    const angle_dash = Math.atan2(toY_dash - fromY_dash, toX_dash - fromX_dash);
    drawArrowhead(ctx, toX_dash, toY_dash, angle_dash, 10);
    ctx.restore();


    // 3. Draw point P
    ctx.beginPath();
    ctx.arc(pX, pY, pRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('P', pX + 10, pY);


    // 4. Draw the arrows from P
    // Arrow A (up)
    const endAY = pY - straightArrowLen;
    ctx.beginPath();
    ctx.moveTo(pX, pY);
    ctx.lineTo(pX, endAY);
    ctx.stroke();
    drawArrowhead(ctx, pX, endAY, -Math.PI / 2, arrowheadSize);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('A', pX, endAY - 5);

    // Arrow E (down)
    const endEY = pY + straightArrowLen;
    ctx.beginPath();
    ctx.moveTo(pX, pY);
    ctx.lineTo(pX, endEY);
    ctx.stroke();
    drawArrowhead(ctx, pX, endEY, Math.PI / 2, arrowheadSize);
    ctx.textBaseline = 'top';
    ctx.fillText('E', pX, endEY + 5);

    // Arrow C (left)
    const endCX = pX - straightArrowLen;
    ctx.beginPath();
    ctx.moveTo(pX, pY);
    ctx.lineTo(endCX, pY);
    ctx.stroke();
    drawArrowhead(ctx, endCX, pY, Math.PI, arrowheadSize);
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('C', endCX - 5, pY);

    // Arrow B (curved up-left)
    const cpBX = pX;
    const cpBY = pY - 60;
    const endBX = pX - 60;
    const endBY = pY - 80;
    ctx.beginPath();
    ctx.moveTo(pX, pY);
    ctx.quadraticCurveTo(cpBX, cpBY, endBX, endBY);
    ctx.stroke();
    const angleB = Math.atan2(endBY - cpBY, endBX - cpBX);
    drawArrowhead(ctx, endBX, endBY, angleB, arrowheadSize);
    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    ctx.fillText('B', endBX - 5, endBY - 2);

    // Arrow D (curved down-left)
    const cpDX = pX;
    const cpDY = pY + 60;
    const endDX = pX - 60;
    const endDY = pY + 80;
    ctx.beginPath();
    ctx.moveTo(pX, pY);
    ctx.quadraticCurveTo(cpDX, cpDY, endDX, endDY);
    ctx.stroke();
    const angleD = Math.atan2(endDY - cpDY, endDX - cpDX);
    drawArrowhead(ctx, endDX, endDY, angleD, arrowheadSize);
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.fillText('D', endDX - 5, endDY + 2);

</script>

</body>
</html>